import './index.css';

let arrowLeft = document.querySelector('.arrow-left');
let arrowRight = document.querySelector('.arrow-right');
let dots = document.querySelectorAll('.dot-box > span');
let list = document.querySelectorAll('.img-box > ul > li');
let box = document.querySelector('.box');
let timer;

// 每次点击的时候需要记录当前是第几张 (记录下标)
let index = 0;
// list[0] ---> 第一个li元素
// 保存上一次的操作下标 (移除上一次的类名)
let lastIndex = 0;

arrowRight.addEventListener('click', arrowRightFn);
arrowLeft.addEventListener('click', arrowLeftFn);

// 下一张函数
function arrowRightFn() {
    console.log('下一张');
    // ul里面展示的图片切换功能, 每一个li包含不同的img, li[下一张下标]实现切换
    index++;
    // 判断index是否超出li集合的长度, 如果超出回到第一个li
    if (index >= list.length) {
        index = 0;
    }

    // ++index >= list.length && (index = 0); // 短路运算
    changeActive();
}

// 上一张函数
function arrowLeftFn() {
    console.log('上一张');

    // 切换index, 如果是第一张, 上一张为最后一张
    index--;
    if (index < 0) {
        index = list.length - 1;
    }

    // --index < 0 && (index = list.length - 1) // 短路运算
    changeActive();
}

// 小圆点的点击事件
dots.forEach((el, elIndex) => {
    el.addEventListener('click', () => {
        // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
        index = elIndex;
        // 更改激活类名
        changeActive();
    });
});

// changeActive 函数, 主要功能是修改激活类名

function changeActive() {
    // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
    list[lastIndex].classList.remove('li-active');
    // 小圆点的激活类
    dots[lastIndex].classList.remove('dot-active');

    // 更换激活对象
    list[index].classList.add('li-active');
    dots[index].classList.add('dot-active');

    // 更新上一次的值lastIndex
    lastIndex = index;
}

// 自动轮播
autoPlay();
function autoPlay() {
    // 停止上一个定时器任务 (解决切换屏幕的bug)
    clearInterval(timer);
    timer = setInterval(() => {
        // 下一张函数
        arrowRightFn();
    }, 3000);
}

// 停止自动轮播 (鼠标移入轮播图范围之内)
box.addEventListener('mouseenter', () => {
    clearInterval(timer);
});

// 继续开始轮播 (鼠标移出轮播图范围)
box.addEventListener('mouseleave', () => {
    autoPlay();
});

// visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

document.addEventListener('visibilitychange', () => {
    // document.hidden 检测文档是否为隐藏
    // document.visibilityState

    // console.log('hidden', document.hidden);
    // console.log('visibilityState', document.visibilityState);

    if (document.hidden) {
        clearInterval(timer);
        console.log('隐藏');
    } else {
        autoPlay();
        console.log('显示');
    }
});
